<template>
	<div style="padding:0 30px 50px;">
	<!--搜索输入框-->
		<div class="search">
	  		<div class="search-input">
	  			<div>
	  				<label>{{ $t('mer.Merchant') }}：</label>
	  				<el-input v-model="searchDeviceData.name" class="block-ipt"></el-input>
	  			</div>
	  			<div>
	  				<label>{{ $t('trade.DeviceID') }}：</label>
	  				<el-input v-model="searchDeviceData.termId" class="block-ipt"></el-input>
	  			</div>
	  			<div>
	  				<label>{{ $t('inputBox.bindingsStartDate') }}：</label>
	  				<el-date-picker v-model="searchDeviceData.startDate" :editable=false class="filter-item block-ipt" type="date"></el-date-picker>
	  			</div>
	  			<div>
	  				<label>{{ $t('inputBox.endDateOfBinding') }}：</label>
	  				<el-date-picker v-model="searchDeviceData.endDate" :editable=false class="filter-item block-ipt" type="date"></el-date-picker>
	  			</div>
	  		</div>
	  		<div class="search-btn">
	  			<el-button class="blue-btn mini2-btn" @click="handleFilter()">{{$t('button.search')}}</el-button>
	  			<el-button class='blue-btn mini2-btn' @click='delSelect()'>{{$t('button.Reset')}}</el-button>
	    		<el-button class="blue-btn max-btn btn-clearance" @click="dialogDeviceAdd = true">{{$t('button.NewDevice')}}</el-button>
	  		</div>
	  	</div>
  		
  		<!--设备列表-->
  		<el-table height=500 stripe :key='tableKey' :data='deviceDatas' v-loading.body="listLoading" border fit highlight-current-row style="width: 100%;">
    		<el-table-column align="center" :label="$t('index.Number')" fixed="left" width="70px" type='index'> </el-table-column>
    		<el-table-column width="120" align="center" :label="$t('inputBox.merchantNumber')" prop="merId">
	   		</el-table-column>
    		<el-table-column width="160" align="center" :label="$t('trade.DeviceID')"  prop="termId"> 
      		</el-table-column>
    		<el-table-column width="155" align="center" :label="$t('mer.Merchant')" prop="merName">
	   		</el-table-column>
	   		<el-table-column width="150" align="center" :label="$t('inputBox.shopNumber')" prop="shopId">
	   		</el-table-column>
	   		<el-table-column width="150" align="center" :label="$t('inputBox.shopName')" prop="shopName">
	   		</el-table-column>
	   		<el-table-column width="150" align="center" :label="$t('inputBox.deviceState')" prop="state" :formatter="judge">
	    	</el-table-column>
	        <el-table-column width="165" align="center" :label="$t('search.SubAccountNo')" prop="outNo">
	    	</el-table-column>
	    	<el-table-column width="150" align="center" :label="$t('inputBox.storageTime')" prop="regTime">
	    	</el-table-column>
	    	<el-table-column width="150" align="center" :label="$t('inputBox.bindingTime')" prop="modTime">
	    	</el-table-column>
	    	<el-table-column width="165" align="center" :label="$t('inputBox.modificationTime')" prop="lastModifiedTime">
	    	</el-table-column>
	    	<el-table-column width="120" align="center" :label="$t('index.Operation')">
	  	  		<template scope="scope">
	  				<el-button class="blue-btn mini-btn" @click="handleDeviceModify(scope.row.termId,scope.row.shopId)">{{$t('inputBox.modify')}}</el-button>
	  	  		</template>
			</el-table-column>
  		</el-table>
  		
  		<!--设备添加-->
  		<el-dialog :title="$t('inputBox.deviceAdd')" :visible.sync="dialogDeviceAdd" width="100%" :before-close="handleClose">
		    <el-form label-width="100px" label="left" label-position="left" :inline="true">
		    		<el-form-item :label="$t('trade.DeviceID')" prop='deviceId'>
		    			<el-input v-model="addTermId"></el-input>
		  			</el-form-item>
		  			<el-form-item :label="$t('inputBox.shopNumber')" prop='shopId'>
		    			<el-input v-model="addShopId"></el-input>
		  			</el-form-item>
			</el-form>
  			<span slot="footer" class="dialog-footer">
		    	<!--<el-button @click="dialogDeviceAdd = false">{{$t('inputBox.cancel')}}</el-button>-->
		    	<el-button type="primary" @click="handleDeviceAdd()">{{$t('button.OK')}}</el-button>
  			</span>
		</el-dialog>
  		
  		<!--设备修改-->
  		<el-dialog :title="$t('inputBox.deviceModify')" :visible.sync="dialogDeviceModify" width="100%" :before-close="handleClose">
		    <el-form label-width="100px" label="left" label-position="left" :inline="true">
		    		<el-form-item :label="$t('inputBox.newDeviceNumber')" prop='newDeviceId'>
		    			<el-input v-model="deviceModifyData.termId"></el-input>
		  			</el-form-item>
		  			<el-form-item :label="$t('inputBox.shopNumber')">
		    			<el-input :disabled="true" v-model="deviceModifyData.shopId"></el-input>
		  			</el-form-item>
			</el-form>
  			<span slot="footer" class="dialog-footer">
		    	<!--<el-button @click="dialogDeviceModify = false">{{$t('inputBox.cancel')}}</el-button>-->
		    	<el-button type="primary" @click="confirmModify()">{{$t('button.OK')}}</el-button>
  			</span>
		</el-dialog>
  		
  		<div v-show="!listLoading" class="pagination-container">
    		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="searchDeviceData.page" :page-sizes="[10,20,30, 50]" :page-size="searchDeviceData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="res.total"></el-pagination>
  		</div>
  		
	</div>

</template>

<script>
	import { deviceAll,deviceModify,deviceAdd,devicePage} from 'api/deviceManegement/index';
	export default {
		name: 'device',
		data(){
			return {
				addTermId:'',
				addShopId:'',
				dialogDeviceModify:false,
				dialogDeviceAdd: false,
				//按条件搜索设备所需参数
				searchDeviceData:{
					termId:'',
					name:'',
					startDate:'',
					endDate:'',
					page: 1,
				    pageSize: 10,
				},
				//返回数据
				res:[],
				deviceDatas:[],
				//设备修改绑定的数据
				deviceModifyData:{
					termId:undefined,
					oldTermId:undefined,
					shopId:undefined,
				},
				//设备添加绑定的数据
				deviceAddData:{
					termId:undefined,
					merchantId:undefined,
				},
				//第一次进设备管理默认展示的数据所需的参数
				deviceFormData: {
//					page: 10,
//					pageSize: ,
//					phone:,
//					name:'',
//					startDate:(new Date(new Date().setMonth((new Date().getMonth()-1)))).Format("yyyy-MM-dd"),
//					endDate:(new Date()).Format("yyyy-MM-dd")
				},
			    list: null,
//			    total: null,//查询得知总设备数
			    listLoading: true,
			    tableKey: 0
			    }
		},
		created () {
//			console.log(this.res.total);
			this.getDeviceList(this.deviceFormData);
//			console.log(this.orderFormData)
		},
		methods: { 
			//清空筛选条件
			delSelect(){
				this.searchDeviceData.termId='';
				this.searchDeviceData.name='';
				this.searchDeviceData.startDate='';
				this.searchDeviceData.endDate='';
				this.handleFilter();
			},
			//格式化
			judge(row){
				let state = row.state;
				if(state === 1){
					return state = this.$t('inputBox.bindings');
				}
				if(state === 2){
					return state = this.$t('inputBox.unbound');
				}
				if(state === 3){
					return state = this.$t('button.Suspended');
				}
			},
			//商户详情的确定按钮绑定的方法
			handleClose(done) {
		        done();
		    },
		    //设备修改的方法
			handleDeviceModify(termId,shopId){
				this.deviceModifyData.oldTermId = termId;
				this.deviceModifyData.shopId = shopId;
				this.dialogDeviceModify = true;
			},
			//设备修改 确认
			confirmModify(){
				let deviceModifyData={
					termId:this.deviceModifyData.termId,
					shopId:this.deviceModifyData.shopId,
					oldTermId:this.deviceModifyData.oldTermId
				}
				deviceModify(deviceModifyData).then(res=>{
					// console.log('设备修改确认按钮后台返回的信息')
					// console.log(res)
					if(res.success === true){
						this.getDeviceList(this.deviceFormData);
						this.dialogDeviceModify = false
						this.$notify({
				            title: this.$t('inputBox.success'),
				            message: this.$t('inputBox.modifySuccess'),
				            type: 'success',
				            duration: 2000
				          });
					}else{
						this.$notify({
				            title: this.$t('inputBox.fail'),
				            message: this.$t('inputBox.modifyFail'),
				            type: 'error',
				            duration: 2000
				         });
					}
				})
			},
			//设备添加的方法
			handleDeviceAdd(){
				let deviceAddData={
					termId:this.addTermId,
					shopId:this.addShopId
				}
				deviceAdd(deviceAddData).then(res=>{
					// console.log('设备添加按钮后台返回的信息')
					// console.log(res)
					if(res.success === true){
						this.getDeviceList(this.deviceFormData);
						this.dialogDeviceAdd = false
						this.$notify({
				            title: this.$t('inputBox.success'),
				            message: this.$t('inputBox.addSuccess'),
				            type: 'success',
				            duration: 2000
				          });
					}else{
//						this.dialogDeviceAdd = false
						this.$notify({
				            title: this.$t('inputBox.fail'),
				            message: this.$t('inputBox.addSuccess'),
				            type: 'error',
				            duration: 2000
				         });
					}
				})
				
			},
			//封装了设备管理的方法
			getDeviceList(value){
				this.listLoading = true;
				value.companyId = localStorage.getItem('companyId');
				value.distributorId = localStorage.getItem('distributorId');
				deviceAll(value).then(res => {
					this.listLoading = false;
					// console.log('设备管理后台返回的数据')
					// console.log(res)
					this.res = res.value;
					this.deviceDatas = res.value.list;
					//console.log(this.deviceDatas)
//					if(res.value.total == 0){
//						this.$message({
//							showClose:true,
//							message:this.$t('hint.NoData'),
//							type:'error'
//						});
//					}
				}).catch(error=>{
					console.log(error);
				})
			},
			//封装了设备分页的方法
			getDevicePage(value){
				this.listLoading = true;
				devicePage(value).then(res => {
					this.listLoading = false;
					//console.log(res)
					this.res = res.value;
					this.deviceDatas = res.value.list;
//					console.log(this.deviceDatas)
					if(res.value.total == 0){
						this.$message({
							showClose:true,
							message:this.$t('inputBox.queryErr'),
							type:'error'
						});
					}
				})
			},
			//点击搜索 设备管理
		    handleFilter() {
		    	//查询设备的参数
		    	const searchDeviceData = this.searchDeviceData
				if(searchDeviceData.termId === ''){
					searchDeviceData.termId = null;
				}
				if(searchDeviceData.name === ''){
					searchDeviceData.name = null;
				}
				if(searchDeviceData.startDate === ''){
					searchDeviceData.startDate = null;
				}
				if(searchDeviceData.endDate === ''){
					searchDeviceData.endDate = null;
				}
//				searchDeviceData.page = this.searchDeviceData.page
//				searchDeviceData.pageSize = this.searchDeviceData.pageSize
				// console.log('设备查询向后台发送的数据')
		    	// console.log(searchDeviceData)
			    this.getDeviceList(searchDeviceData);
		    },
		    //pageSize 改变时会触发
		    handleSizeChange(val) {
		        this.searchDeviceData.pageSize = val;
		        // console.log('每页条数改变向后台发送数据')
		        // console.log(this.searchDeviceData)
		        this.handleFilter();
		    },
		    //currentPage 改变时会触发
		    handleCurrentChange(val) {
		        this.searchDeviceData.page = val;
		        // console.log('页改变向后台发送数据')
		        // console.log(this.searchDeviceData)
		        this.handleFilter();
		    },
		}
	}

</script>

<style>
</style>